<template>
  <div>
    <h1>需求一：显示头像图片</h1>
    <myTable :arr="list">
      <template v-slot="scope">
        <img :src="scope.row.headImgUrl" alt="">
      </template>
    </myTable>
    <h1>需求二：直接显示头像路径</h1>
    <myTable :arr="list">
      <template v-slot="scope">
        <span>{{scope.row.headImgUrl}}</span>
      </template>
    </myTable>
  </div>
</template>

<script>
/**
 * 1、确定数据源的位置----父组件中
 * 2、子组件，通过props定义数据变量arr
 * 3、子组件，根据arr数组渲染
 * 4、头像位置，内容要自定义(即可渲染img标签，又可以渲染其他标签)，可以插槽
 * 5、img需要把头像渲染出来的话需要用到头像路径，这个路径在子组件中，
 *  因此可以使用作用域插槽把头像路径传递给父组件使用
 */ 
import myTable from "@/components/myTable"
export default {
  components: {myTable},
  data(){
    return {
      list: [
    {
        name: "小传同学",
        age: 18,
        headImgUrl:
        "http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg",
    },
    {
        name: "小黑同学",
        age: 25,
        headImgUrl:
        "http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg",
    },
    {
        name: "智慧同学",
        age: 21,
        headImgUrl:
        "http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg",
    },
],
    }
  }
}
</script>

<style>

</style>